// https://nuxt.com/docs/api/configuration/nuxt-config
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineNuxtConfig({
  ssr: false,
  css: ['@/assets/css/index.scss'],
  runtimeConfig: {
    public: {
      apiBaseUrl: process.env.API_BASE_URL,
      videoCdnUrl: process.env.VIDEO_CDN_URL,
      sourceCdnUrl: process.env.IMAGE_CDN_URL,
    },
  },
  modules: [
    '@pinia/nuxt',
    [
      '@vant/nuxt',
      {
        lazyload: {
          lazyComponent: true,
          loading: '/static/img/img_loading.png',
          error: '/static/img/img_loading.png',
        },
      },
    ],
  ],
  devServer: {
    host: '0.0.0.0',
    port: 3000,
  },
  experimental: {
    inlineSSRStyles: false,
  },
  app: {
    head: {
      meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }],
    },
  },
  vue: {
    compilerOptions: {
      isCustomElement: tag => tag.startsWith('easy-'),
    },
  },
  postcss: {
    plugins: {
      autoprefixer: {
        overrideBrowserslist: ['last 5 version', '>1%', 'ie >=8'],
      },
      'postcss-mobile-forever': {
        appSelector: 'body',
        border: true,
        mediaQuery: false,
        enableMediaQuery: true,
        desktopWidth: 500,
        landscapeWidth: 450,
        unitToConvert: 'px', // 需要转换的单位，默认为"px"
        viewportWidth: 375, // 设计稿的视口宽度
        unitPrecision: 2, // 单位转换后保留的精度
        propList: ['*'], // 能转化为vw的属性列表,!font-size表示font-size后面的单位不会被转换
        viewportUnit: 'vw', // 希望使用的视口单位
        fontViewportUnit: 'vw', // 字体使用的视口单位
      },
    },
  },
  nitro: {
    devProxy: {
      '/videoCdn/': {
        target: process.env.VIDEO_CDN_URL, // 这里是接口地址
        changeOrigin: true,
        prependPath: true,
      },
    },
  },
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData:
            '@use "@/assets/css/variables.scss" as *;@use "@/assets/css/mixins.scss" as *;',
        },
      },
    },
    plugins: [
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'assets/svgs')],
      }),
    ],
    build: {
      minify: 'terser',
      rollupOptions: {
        output: {
          manualChunks: id => {
            if (id.includes('swiper')) {
              return 'swiper'
            } else if (id.includes('xgplayer')) {
              return 'xgplayer'
            } else if (id.includes('crypto-js')) {
              return 'crypto-js'
            } else if (id.includes('vant')) {
              return 'vant'
            }
          },
        },
      },
    },
  },
})
